<template>
    <view class="c2b-toast-container" v-if="isHidden">

        <view class="c2b-toast-box">
            <image class="" style="width:181.76rpx;height: 56rpx;"
                src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/c2b/Dividers@2x.png" />
            <view class="c2b-toast-text">
                选择定制图形后，将清除已输入内容
            </view>
            <view class="c2b-btn-box">
                <view class="c2b-toast-btn" @click="close">取消</view>
                <view class="c2b-toast-btn btn-enter" @click="enter">确定</view>
            </view>


        </view>
        <view class="c2b_">

        </view>
    </view>


</template>

<script>
export default {
    data() {
        return {
            isHidden: false
        }
    },
    methods: {
        Show() {
            this.isHidden = true
        },
        Hidden() {
            this.isHidden = false
        }
        ,
        close() {
            this.Hidden()
            this.$emit('onEnterC2bToast', false)
        },
        enter() {
            this.Hidden()
            this.$emit('onEnterC2bToast', true)
        }

    }

}
</script>

<style lang="less" scoped>
.c2b-toast-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 750rpx;
    height: 1624rpx;
    // display: flex;
    // flex-direction: column;
    // align-items: center;
    z-index: 999999;
}

.c2b_ {
    width: 100%;
    height: 100%;
    opacity: 0.5;

    background: #000000;
}


.c2b-toast-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 654rpx;
    height: 508rpx;
    background-color: #FFFFFF;
    padding: 128rpx 64rpx 96rpx 64rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;

    image {
        margin-bottom: 20rpx;
    }

    .c2b-toast-text {
        font-size: 28rpx;
        height: 48rpx;
        text-align: center;
        margin-bottom: 80rpx;
    }

    .c2b-btn-box {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .c2b-toast-btn {
        width: 255rpx;
        height: 80rpx;
        border-radius: 48rpx 16rpx 48rpx 48rpx;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 32rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 4rpx solid #000000;
    }

    .btn-enter {
        color: #FFFFFF;
        background: #000000;
    }
}
</style>